<template>
  <Modal
    v-model="modal"
    width="800px"
    title="评论内容"
    :footer-hide="true"
    :styles="{ top: '80px' }"
  >
    <div class="show-content">
      <div class="content-aera">
        <div class="content-origin">
          <div>
            评论原文:
          </div>
          <P>{{originData.originalContent}}</P>
        </div>
        <div class="content-see">
          <div>
            显示文本:
          </div>
          <P>{{originData.content}}</P>
        </div>
      </div>
    </div>
  </Modal>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      modal: false,
      originData: {},
    };
  },
  methods: {
    show(record) {
      this.originData = { ...record };
      this.$nextTick(() => {
        this.modal = true;
      });
    },
    ok() {},
    cancel() {
      this.modal = false;
    },
  },
};
</script>
<style lang="less" scoped>
.show-content {
  .content-aera{
    display: flex;
    .content-origin{
      flex: 1;
    }
    .content-see{
      flex: 1;
    }
    &>div{
      border: 1px solid #efefef;
      margin: 5px;
      border-radius: 5px;
      padding: 10px;
      height: 500px;
      overflow: auto;
    }
    p{
      text-indent: 2em;
    }
  }
}
</style>
<style lang="scss" scoped>
@import "./style.scss";

</style>
